<template>
  <div class="range-div" @click="showSelect">
    <el-input-number
      v-model="numbers[0]"
      @change="handleMinChange"
      style="width:100px;"
      :controls="false"
      :min="0"
      :max="numbers[1]"
    />
    ~
    <el-input-number
      v-model="numbers[1]"
      @change="handleMaxChange"
      style="width:100px;"
      :controls="false"
      :min="numbers[0]"
    />
  </div>
</template>

<script>
const MIN_NUMBER = 1;
const MAX_NUMBER = 100000;

export default {
  props: {
    numbers:{
      type: Array,
      default: ()=> []
    }
  },
  data() {
    return {
    };
  },
  methods: {
    showSelect() {

    },
    getFormData() {
      const ret = {};
      this.$refs.form.validate(valid => {
        ret.valid = valid;
        ret.form = this.form;
      });
      return ret;
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    handleMinChange(e) {
       console.log(e)
      // this.$refs.form.validateField("max");
    },
    handleMaxChange() {
      // this.$refs.form.validateField("min");
    }
  }
};
</script>
<style>
.range-div {
  width: 220px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
.range-div input {
  border: 0;
}
</style>
